import axios from 'axios'
const DEFAULTTHEME = '#39befe' // 对应当前主题文件下的主题颜色 /theme/css/index.css
const THEMEURL = '/theme/index.css'

export class ThemeHandler {
  constructor (theme) {
    this.theme = theme || DEFAULTTHEME
    this.chalk = ''
  }
  async changeTheme (val) {
    if (typeof val !== 'string') return
    if (val.length < 6) return
    // const oldTheme = this.theme
    // const oldCluster = this.getThemeCluster(oldTheme.replace('#', ''))
    const newCluster = this.getThemeCluster(val.replace('#', ''))
    if (!this.chalk) {
      await this.getCSSString(THEMEURL, 'chalk')
    }
    this.theme = val
    const chalkHandler = this.getHandler('chalk', 'chalk-style')
    chalkHandler(newCluster)

    this.setHtmlProperty('--promary-color', val)
    this.setHtmlProperty('--promary-tiny-color2', this.tintColor(val.replace('#', ''), 0.2))
    this.setHtmlProperty('--promary-tiny-color6', this.tintColor(val.replace('#', ''), 0.6))
    // this.setStyleExcludeEle(this.getStyleExcludeEle(oldTheme), oldCluster, newCluster)
  }
  getHandler (variable, id) {
    return (Cluster) => {
      const originCluster = this.getThemeCluster(DEFAULTTHEME.replace('#', ''))
      const newStyle = this.updateStyle(this[variable], originCluster, Cluster)
      let styleTag = document.getElementById(id)
      if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', id)
        document.head.appendChild(styleTag)
      }
      styleTag.innerText = newStyle
    }
  }
  updateStyle (style, oldCluster, newCluster) {
    let value = style
    oldCluster.forEach((content, index) => {
      value = value.replace(new RegExp(content, 'ig'), newCluster[index])
    })
    return value
  }
  // 将颜色变浅
  tintColor (color, tint) {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    if (tint === 0) { // when primary color is in its rgb space
      return [red, green, blue].join(',')
    } else {
      red += Math.round(tint * (255 - red))
      green += Math.round(tint * (255 - green))
      blue += Math.round(tint * (255 - blue))

      red = red.toString(16)
      green = green.toString(16)
      blue = blue.toString(16)

      return `#${red}${green}${blue}`
    }
  }
  // 调整颜色明暗
  shadeColor (color, shade) {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    red = Math.round((1 - shade) * red)
    green = Math.round((1 - shade) * green)
    blue = Math.round((1 - shade) * blue)

    red = red.toString(16)
    green = green.toString(16)
    blue = blue.toString(16)

    return `#${red}${green}${blue}`
  }
  getThemeCluster (theme) {
    const clusters = [theme]
    for (let i = 0; i <= 9; i++) {
      clusters.push(this.tintColor(theme, Number((i / 10).toFixed(2))))
    }
    clusters.push(this.shadeColor(theme, 0.1))
    return clusters
  }
  getCSSString (url, variable) {
    return axios.get(url).then(({ data }) => {
      this[variable] = data
      return Promise.resolve()
    })
      .catch((error) => {
        return Promise.reject(error)
      })
  }
  getStyleExcludeEle (value) {
    const styles = Array.prototype.slice.call(document.querySelectorAll('style'))

    return styles.filter(style => {
      const text = style.innerText
      if (new RegExp(value).test(text) && !/Chalk Variable/.test(text)) {
      }
      return new RegExp(value).test(text) && !/Chalk Variable/.test(text)
    })
  }
  setStyleExcludeEle (styles, oldCluster, newCluster) {
    styles.forEach(style => {
      style.innerText = this.updateStyle(style.innerText, oldCluster, newCluster)
    })
  }
  setHtmlProperty (name, value) {
    document.documentElement.style.setProperty(name, value)
  }
}
